Ext.Loader.setConfig({
	enabled : true
});

Ext.Loader.setPath({
	'Ext.unibase' : 'resources/js/unibase'
});

Ext.onReady(function() {

	var header = Ext.create('Ext.Component', {
		region : 'north',
		height : 80,
		autoEl : {
			tag : 'div',
			html : '<h1>Logo&Title <a href="javascript:void(0)" onclick="exit();">退出系统</a></h1>'
		}
	});

	var model = Ext.define('TreeModel', {
		extend : 'Ext.data.Model',
		fields : [ {
			name : 'id',
			type : 'string'
		}, {
			name : 'text',
			type : 'string'
		}, {
			name : 'iconCls',
			type : 'string'
		}, {
			name : 'leaf',
			type : 'boolean'
		}, {
			name : 'type'
		}, {
			name : 'component'
		} ]
	});

	var loadSub = function(id) {
		return Ext.create('Ext.data.TreeStore', {
			defaultRootId : id,
			model : model,
			proxy : {
				type : 'ajax',
				url : 'module/menu'
			},
			clearOnLoad : true,
			nodeParam : 'id'
		});
	};

	var menu = Ext.create('Ext.panel.Panel', {
		region : 'west',
		title : '系统菜单',
		width : 200,
		autoScroll : false,
		layout : 'accordion',
		collapsible : true,
		animCollapse : true,
		split : true,
		listeners : {
			beforerender : function() {
				Ext.Ajax.request({
					url : 'module/menu',
					method : 'post',
					success : function(response) {
						var menus = Ext.JSON.decode(response.responseText);
						for ( var i = 0; i < menus.length; i++) {
							menu.add(Ext.create('Ext.tree.Panel', {
								title : menus[i].text,
								autoScroll : true,
								iconCls : menus[i].iconCls,
								rootVisible : false,
								viewConfig : {
									loadingText : '正在加载...'
								},
								store : loadSub(menus[i].id),
								listeners : {
									itemclick : function(view, node) {
										console.info(node);
										if(node.isLeaf()){
											var activeTab = content.getComponent(node.data.id);
											if(activeTab){
												content.setActiveTab(activeTab);
											}else{
												var panel = Ext.create(
													node.data.component, {
													id : node.data.id,
													title : node.data.text,
													closable : true
												});
												content.add(panel);
												content.setActiveTab(panel);
											}
										}
									}
								}
							}));
						}
					}
				});
			}
		}
	});

	var content = Ext.create('Ext.tab.Panel', {
		activeTab : 0,
		enableTabScroll : true,
		animScroll : true,
		border : true,
		region : 'center',
		split : true,
		items : [ {
			title : '平台首页',
			xtype : 'component',
			autoEl : {
				tag : 'div',
				html : '<h1>welcome</h1>'
			}
		} ]
	});

	Ext.create('Ext.container.Viewport', {
		layout : 'border',
		items : [ header, menu, content ],
		listeners : {
			afterrender : function() {
				var hideMask = function() {
					Ext.get('loading').remove();
					Ext.fly('loading-mask').animate({
						opacity : 0,
						remove : true
					});
				};
				Ext.defer(hideMask, 250);
			}
		}
	});

});